<template>
<div class="trade-container">
  <h3>填写并核对订单信息</h3>
  <div class="content">
    <h5>收件人信息</h5>
    <div class="address" v-for="(address,index) in getUserAddress">
      <span class="name" :class="{active:index==value}">{{ address.consignee }}</span>
      <p @click="value=index">
        <span>{{ address.userAddress }} {{address.phoneNum}}</span>
        <span v-show="index==value">默认地址</span>
      </p>
    </div>
    <div class="line"></div>
    <h5>支付方式</h5>
    <div class="address">
      <span>在线支付</span>
      <span style="margin-left: 5px">货到付款</span>
    </div>
    <div class="line"></div>
    <h5>送货清单</h5>
    <div class="way">
      <h5>配送方式</h5>
      <div class="info">
        <span>天天快递</span>
        <p>配送时间：预计8月10日（周三）09:00-15:00送达</p>
      </div>
    </div>
    <div class="detail">
      <h5>商品清单</h5>
      <ul class="listInformation" v-for="(orderInfo,index) in detailArrayList">
        <li>
          <img :src="orderInfo.imgUrl"/>
        </li>
        <li>{{orderInfo.skuName}}</li>
        <li style="color:#e12228;font-size: 14px;font-weight: 700;line-height:102px">￥{{orderInfo.orderPrice}}</li>
        <li style="line-height:102px">X{{orderInfo.skuNum}}</li>
        <li style="line-height:102px">有货</li>
      </ul>
    </div>
    <div class="bbs">
      <h5>买家留言:</h5>
      <textarea placeholder="建议留言前先与商家沟通确认" v-model="msg"></textarea>
    </div>
    <div class="line"></div>
    <div class="bill">
      <h5>发票信息:</h5>
      <div>普通发票(电子)  个人  明细</div>
      <h5>使用优惠/抵用</h5>
    </div>
  </div>
  <div class="money">
    <ul>
      <li>
        <b>
          <i>{{ getOrderInfo.totalNum}}</i>
          件商品，总商品金额
        </b>
        <span>¥{{ totalPrice }}.00</span>
      </li>
      <li>
        <b>
          返现:
        </b>
        <span>0.00</span>
      </li>
      <li>
        <b>
          运费:
        </b>
        <span>0.00</span>
      </li>
    </ul>
  </div>
  <div class="trade">
    <p>应付金额: &nbsp; <span>¥{{ totalPrice }}.00</span></p>
    <p>寄送至: 通州区 收货人：格玛18801999967</p>
  </div>
 <div class="btn">
   <button class="subBtn" @click="submitOrder">提交订单</button>
 </div>
</div>
</template>

<script>
import {mapState} from 'vuex'
export default {
name: "index",
  data(){
  return{
    value:0,
    msg:'',
    orderId:0
  }
  },
  methods:{
 async submitOrder(){
   let {tradeNo}=this.getOrderInfo
   let data={
     consignee:this.getUserAddress[this.value].consignee,
     consigneeTel:this.getUserAddress[this.value].phoneNum,
     deliveryAddress:this.getUserAddress[this.value].fullAddress,
     paymentWay:'ONLINE',
     orderComment:this.msg,
     orderDetailList:this.getOrderInfo.detailArrayList
   }
     let result = await this.$API.reqSubmitOrder(tradeNo, data)
     console.log(result)
     if(result.data.code==200){
       this.orderId=result.data.data
       await this.$router.push(`/pay?orderId=${this.orderId}`)
     }else {
       alert(result.data.message)
     }
 }
  },
  mounted() {
  this.$store.dispatch('getUserAddress')
    this.$store.dispatch('getOrderInfo')
  },
  computed:{
  ...mapState({
    getUserAddress:state=>state.trade.address,
    getOrderInfo: state=>state.trade.orderInfo
  }),
    detailArrayList(){
    return this.getOrderInfo.detailArrayList
    },
    totalPrice(){
    let total=0
      total=this.getOrderInfo.totalAmount
    return total
    }

  }
}
</script>

<style scoped lang="less">
.active{
  border-color: #e1251b!important;
  display: none;
}
.active::after {
  display: inline-block;
  content: "";
  width: 13px;
  height: 13px;
  position: absolute;
 left:87px;
  top:18px;
  background: url("../../assets/img/gou.png");
}
.listInformation{
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  img{
    width: 100px;
    height: 100px;
  }
  li:nth-child(2){
    width: 200px;
    overflow:hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: center;
    line-height: 102px;
  }
}
.btn{
width: 1200px;
  height:70px;
  margin: 10px auto;
}
.subBtn{
  float: right;
  width: 164px;
  height: 56px;
  font: 700 18px 微软雅黑;
  line-height: 56px;
  text-align: center;
  color: #fff;
  background-color: #e1251b;
}
.trade{
  p{
    line-height: 30px;
    span{
      color: #e12228;
      font-weight: 700;
      font-size: 14px;
    }
  }
  p:nth-child(2){
    color: #999;
  }
  font-size: 12px;
  padding: 10px;
  margin: 10px auto;
  width: 1178px;
  text-align: right;
  background-color: #f4f4f4;
  border: 1px solid #ddd;
}
.money{
  width: 1200px;
  height: 90px;
  margin: 20px auto;
  ul{
    float: right;
    width: 220px;
    li{
      b{
        color: #333;
        font-weight: normal;
      }
      i{
        color:rgb(255, 0, 0);
        font-style: normal;
      }
      justify-content: space-between;
      font-size: 12px;
      display: flex;
      line-height: 30px;
    }
  }
}
.bbs{
  margin-bottom: 15px;
  h5{
    margin: 0!important;
    line-height: 50px!important;
  }
 textarea{
   width: 100%;
   border-color: #e4e2e2;
   line-height: 1.8;
   outline: none;
   resize: none;
 }
}
.detail{
  width: 1080px;
  background: #feedef;
  padding: 15px;
  margin: 2px auto 0;
}
.way{
  padding: 15px;
  margin: 0 auto;
  width: 1080px;
  height: 110px;
  background: #f4f4f4;
  .info{
    span {
      float: left;
      border: 1px solid #ddd;
      width: 120px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      margin-right: 10px;
    }
    p{
      line-height: 30px;
    }
  }
}
.line{
  height: 1px;
  background-color: #ddd;
}
.trade-container{
  width: 100%;
  h3{
    width: 1200px;
    margin: 0 auto;
    font-size: 14px;
  }
  .content{
    width: 1148px;
   padding: 25px;
    margin: 10px auto 0;
    border: 1px solid rgb(221, 221, 221);
    font-size: 12px;
    h5{
      margin: 18px 0;
      line-height: 36px;
    }
    .address{
      height: 32px;
      margin-bottom: 15px;
      padding-left: 20px;
      .name{
        position: relative;
        border: 1px solid #ddd;
        width: 100px;
        height: 30px;
        display: block;
        text-align: center;
        float: left;
        line-height: 30px;
      }
      p:hover{
        background-color:rgb(221, 221, 221)
      }
      p{
        text-align:left;
        width: 610px;
        float: left;
        height: 30px;
        line-height: 30px;
        margin-left: 15px;
        span:nth-child(2){
          width: 56px;
          height: 24px;
          display: inline-block;
          text-align: center;
          line-height: 24px;
          background-color: #878787;
          color: #fff;
          margin: 3px 0 0 10px;
        }
      }
    }
  }
}
</style>
